import React from "react";
import style from "./tab.module.css";
import Mask from '../../components/detailed/Pages'
import { NavLink } from 'react-router-dom'
export default class Tab extends React.Component {
  state = {
    num: 1,
    mask: false
  };
  openMask = () => {
    this.setState({ mask: !this.state.mask })
  }
  render() {
    return (
      <div>
        <div className={style.container}>
          <div className={style.header}>
            <div className={style.mask}></div>
            <div className={style.headerContent}>
              <img
                className={style.headimg}
                src="http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg"
                alt=""
              />
              <div className={style.right}>
                <div className={style.title}>
                  <img src={require("../../img/brand@2x.png")} alt="" />
                  粥品香坊（大运村）
                </div>
                <div className={style.title2}>蜂鸟专送/38分钟送达</div>
                <div className={style.title3}>
                  <img src={require("../../img/decrease_1@2x.png")} alt="" />
                  在线支付满28减5
                </div>
              </div>
              <div className={style.mydiv}>
                <img src={require("../../img/bulletin@2x.png")} alt="" />
                <span className={style.textContainer} onClick={this.openMask}>
                  粥品香坊其烹饪粥料的秘方源于中国千年古法，在融和现代制作工艺，由世界烹饪大师屈浩先生领衔研发。坚守纯天然、0添加的良心品质深得消费者青睐，发展至今成为粥类的引领品牌。是2008年奥运会和2013年园博会指定餐饮服务商
                </span>
              </div>
            </div>
          </div>
        </div>
        <div className={style.box1}>
          <NavLink to='products' className={style.option}>
            <div
              onClick={() => this.tab(1, '/products')}
              style={{
                color: this.state.num === 1 && "rgb(240,20,20)",
                borderBottom: this.state.num === 1 && '.0267rem solid rgb(240,20,20)'
              }}
            >
              商品
            </div>
          </NavLink>
          <NavLink to='comments' className={style.option}>
            <div
              onClick={() => this.tab(2, '/comments')}
              style={{
                color: this.state.num === 2 && "rgb(240,20,20)",
                borderBottom: this.state.num === 2 && '.0267rem solid rgb(240,20,20)'
              }}
            >
              评价
            </div>
          </NavLink>
          <NavLink to='business' className={style.option}>
            <div
              onClick={() => this.tab(3, '/business')}
              style={{
                color: this.state.num === 3 && "rgb(240,20,20)",
                borderBottom: this.state.num === 3 && '.0267rem solid rgb(240,20,20)'
              }}
            >
              商家
            </div>
          </NavLink>

        </div>{
          this.state.mask && <Mask fn={this.openMask} />
        }

      </div>
    );
  }
  tab = (a, url) => {

    this.setState({ num: a });
  };
}
